import React, { useState } from 'react';
import { Filter, CheckCircle, XCircle, User, Clock, Phone } from 'lucide-react';

interface VerificationRecord {
  id: string;
  visitorName: string;
  visitorPhone: string;
  visitedPerson: string;
  visitedPhone: string;
  visitTime: string;
  verifyTime: string;
  result: 'approved' | 'rejected';
  reason?: string;
  isSpecial: boolean;
  specialType?: string;
}

export const TodayRecords: React.FC = () => {
  const [filter, setFilter] = useState<'all' | 'approved' | 'rejected'>('all');

  // Mock data
  const records: VerificationRecord[] = [
    {
      id: 'R001',
      visitorName: '王小明',
      visitorPhone: '13812345678',
      visitedPerson: '李医生',
      visitedPhone: '13987654321',
      visitTime: '2024-12-01 14:30',
      verifyTime: '2024-12-01 14:25',
      result: 'approved',
      isSpecial: true,
      specialType: 'VIP'
    },
    {
      id: 'R002',
      visitorName: '张三',
      visitorPhone: '13800138001',
      visitedPerson: '陈经理',
      visitedPhone: '13800138002',
      visitTime: '2024-12-01 15:00',
      verifyTime: '2024-12-01 14:58',
      result: 'rejected',
      reason: '未携带身份证件',
      isSpecial: false
    },
    {
      id: 'R003',
      visitorName: '李四',
      visitorPhone: '13900139001',
      visitedPerson: '王主任',
      visitedPhone: '13900139002',
      visitTime: '2024-12-01 16:00',
      verifyTime: '2024-12-01 15:55',
      result: 'approved',
      isSpecial: false
    }
  ];

  const filteredRecords = records.filter(record => {
    if (filter === 'all') return true;
    return record.result === filter;
  });

  const getResultIcon = (result: string) => {
    return result === 'approved' 
      ? <CheckCircle className="h-5 w-5 text-green-500" />
      : <XCircle className="h-5 w-5 text-red-500" />;
  };

  const getResultText = (result: string) => {
    return result === 'approved' ? '已放行' : '已拒绝';
  };

  const getResultBadgeClass = (result: string) => {
    return result === 'approved'
      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
      : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
  };

  return (
    <div className="max-w-6xl mx-auto">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">今日核验记录</h2>
              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                {new Date().toLocaleDateString()} 的所有访客核验记录
              </p>
            </div>

            {/* Filter buttons */}
            <div className="flex items-center space-x-2">
              <Filter className="h-5 w-5 text-gray-400" />
              <div className="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden">
                <button
                  onClick={() => setFilter('all')}
                  className={`px-3 py-1 text-sm ${
                    filter === 'all'
                      ? 'bg-blue-600 text-white'
                      : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
                  } transition-colors`}
                >
                  全部
                </button>
                <button
                  onClick={() => setFilter('approved')}
                  className={`px-3 py-1 text-sm border-l border-gray-300 dark:border-gray-600 ${
                    filter === 'approved'
                      ? 'bg-blue-600 text-white'
                      : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
                  } transition-colors`}
                >
                  已放行
                </button>
                <button
                  onClick={() => setFilter('rejected')}
                  className={`px-3 py-1 text-sm border-l border-gray-300 dark:border-gray-600 ${
                    filter === 'rejected'
                      ? 'bg-blue-600 text-white'
                      : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
                  } transition-colors`}
                >
                  已拒绝
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="p-6">
          {filteredRecords.length === 0 ? (
            <div className="text-center py-12">
              <Clock className="mx-auto h-12 w-12 text-gray-400 mb-4" />
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                暂无记录
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                {filter === 'all' ? '今日还没有访客核验记录' : `今日还没有${filter === 'approved' ? '放行' : '拒绝'}的记录`}
              </p>
            </div>
          ) : (
            <div className="space-y-4">
              {filteredRecords.map((record) => (
                <div key={record.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
                  <div className="flex items-start justify-between">
                    <div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-4">
                      {/* Visitor info */}
                      <div>
                        <div className="flex items-center mb-2">
                          <User className="h-4 w-4 text-gray-400 mr-2" />
                          <span className="font-medium text-gray-900 dark:text-white">{record.visitorName}</span>
                          {record.isSpecial && (
                            <span className="ml-2 px-2 py-1 text-xs bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 rounded-full">
                              {record.specialType}
                            </span>
                          )}
                        </div>
                        <div className="flex items-center text-sm text-gray-600 dark:text-gray-400">
                          <Phone className="h-3 w-3 mr-1" />
                          {record.visitorPhone}
                        </div>
                        <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                          被访人：{record.visitedPerson}
                        </div>
                      </div>

                      {/* Time info */}
                      <div>
                        <div className="flex items-center mb-2">
                          <Clock className="h-4 w-4 text-gray-400 mr-2" />
                          <span className="text-sm text-gray-900 dark:text-white">核验时间</span>
                        </div>
                        <div className="text-sm text-gray-600 dark:text-gray-400">
                          {record.verifyTime}
                        </div>
                        <div className="text-sm text-gray-500 dark:text-gray-500 mt-1">
                          预约：{record.visitTime}
                        </div>
                      </div>

                      {/* Result */}
                      <div>
                        <div className="flex items-center mb-2">
                          {getResultIcon(record.result)}
                          <span className={`ml-2 px-2 py-1 text-xs rounded-full ${getResultBadgeClass(record.result)}`}>
                            {getResultText(record.result)}
                          </span>
                        </div>
                        {record.reason && (
                          <div className="text-sm text-red-600 dark:text-red-400">
                            原因：{record.reason}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};